<template>
  <div>
    <div id="001" style="width:50%;height:400px"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        tooltip: {
          trigger: "xAxis", // 若需要使用默认的『显示』『隐藏』触发规则，则可以去掉trigger的配置
          axisPointer: { type: "cross", show: true },
          formatter: "{a}{b}{c}", // 默认触发规则中散点展示的内容，{a}标题;{b}X坐标;{c}Y坐标
        },
        legend: {
          data: ["xxx", "yyy"],
          orient: "horizontal",
          x: "right",
          y: " center",
        },
        grid: {
          x: 35,
          y: 50,
          x2: 35,
          y2: 98,
        },
        xAxis: [
          {
            type: "category",
            data: ["工业", "服务业", "旅游业", "其他行业"],
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#595C61",
              },
              rotate: 45,
            },
            axisLine: {
              show: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "数量",
            max: 250,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#595C61",
              },
              rotate: 45,
            },
            axisLine: {
              show: true,
            },
          },
          {
            type: "value",
            name: "占比",
            min: 0,
            max: 100,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#595C61",
              },
              rotate: 45,
            },
            axisLine: {
              show: true,
            },
          },
        ],
        series: [
            // 散点图
          {
            name: "xxx",
            type: "scatter",
            data: [50, 60, 90, 220],
            color: "#32C5FF",
            symbolSize: 22,
          },
          {
            name: "yyy",
            type: "scatter",
            data: [160, 180, 170, 190],
            color: "#92C5FF",
            symbolSize: 12,
          },
        //   折线图
          {
            name: "yyy",
            type: "line",
            data: [20, 40, 30, 110],
            color: "#49BDAC",
          },
          {
            name: "yyy2",
            type: "line",
            data: [10, 30, 90, 110],
            color: "#49BDAC",
          },
        ],
      },
    };
  },
  methods: {
    drawLine() {
      let charts001 = this.$echarts.init(document.getElementById("001"));
      charts001.setOption(this.option)
    },
  },
  mounted() {
    this.drawLine();
  },
};
</script>
